<template>
  <view class="goods">
    <view class="goodshouse">
      <view class="title">
        <view class="countView">
          本月收入（元）
          <view class="count">
            2800.00
            <text class="sub">较上月上涨23%</text>
          </view>
        </view>
      </view>
      <u-gap height="2" bg-color="#E9E9E9"></u-gap>
      <view class="goodsContent">
        <view class="goodsItem">
          <view class="goodsItemTitle">
            本月订单
          </view>
          <view class="goodsItemNum">
            324
          </view>
        </view>
        <view class="goodsItem">
          <view class="goodsItemTitle">
            累计订单
          </view>
          <view class="goodsItemNum">
            3343
          </view>
        </view>
        <view class="goodsItem">
          <view class="goodsItemTitle">
            累计收入
          </view>
          <view class="goodsItemNum">
            2413.00
          </view>
        </view>
      </view>
    </view>
    <view class="logTitle">
      收入明细
      <view class="search" @click="searchShow=true">
        筛选
      </view>
    </view>
    <scroll-view scroll-y class="scrollView">
      <u-collapse :accordion="false" :key="activeType" v-if="activeType != 3">
        <u-collapse-item :title="item.title" v-for="(item, index) in itemList" :key="index" :open="true" :item-style="itemStyle">
          <view class="countRight">{{ item.num }}</view>
          <view class="logItem" v-for="i in item.list" :key="i.id">
            <view class="logItem-icon">
            </view>
            <view class="itemCount">
              <view class="itemTitle">
                <view class="name">
                  {{ i.name }}
                  <view class="tag">{{ i.tag }}</view>
                </view>
                <view class="itemNum">
                  {{ i.count }}
                </view>
              </view>
              <view class="itemDate">
                {{ i.date }}
              </view>
              <view class="itemOrder">
                券号：{{ i.order }}
              </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
      <u-collapse :accordion="false" :key="activeType+1" v-else>
        <u-collapse-item :title="item.title" v-for="(item, index) in teamList" :key="index" :open="true" :item-style="itemStyle">
          <view class="countRight">{{ item.num }}</view>
          <view class="logItem team" v-for="i in item.list" :key="i.id" @click="goTeamDetail(i)">
            <view class="logItem-icon">
            </view>
            <view class="itemCount">
              <view class="itemTitle">
                <view class="name">
                  {{ i.name }}
                  <view class="tag">{{ i.tag }}</view>
                </view>
                <view class="itemNum">
                  ￥{{ i.count }}
                  <uni-icons type="right" size="14"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </scroll-view>
    <u-popup v-model="searchShow" mode="top" border-radius="14">
      <view class="searchPopup">
        <view class="typeText">
          交易类型
        </view>
        <view class="searchType">
          <view class="btn" :class="activeSearch == 1&&'active'" @click="checkSearch(1)">
            全部
          </view>
          <view class="btn" :class="activeSearch == 2&&'active'" @click="checkSearch(2)">
            我的收入
          </view>
          <view class="btn" :class="activeSearch == 3&&'active'" @click="checkSearch(3)">
            团队收入
          </view>
        </view>
        <view class="footer">
          <view class="btn cancelBtn" @click="activeSearch = 1">
            重置
          </view>
          <view class="btn submitBtn" @click="handleSubmit">
            确定
          </view>
        </view>
      </view>


    </u-popup>
  </view>

</template>

<script>

export default {
  data() {
    return {
      itemStyle: {
        marginBottom: '30rpx'
      },
      itemList: [
        {
          title: '2025年1月',
          num: '收入￥23423.00',
          list: [
            {
              id: 1,
              name: '核销大金柜x1',
              tag: '自己',
              count: '-100.00',
              date: '2025年01月08日 13:32:31',
              order: '24314.00'
            },
            {
              id: 2,
              name: '核销大金柜x1',
              tag: '代理商',
              count: '+1000.00',
              date: '2025年01月08日 13:32:31',
              order: '31634.00'
            },
            {
              id: 3,
              name: '核销大金柜x1',
              tag: '销售',
              count: '-100.00',
              date: '2025年01月08日 13:32:31',
              order: '33634.00'
            }
          ]
        },
        {
          title: '2024年12月',
          num: '收入￥23423.00',
          list: [
            {
              id: 1,
              name: '核销大金柜x1',
              tag: '销售',
              count: '-100.00',
              date: '2025年01月08日 13:32:31',
              order: '33634.00'
            },
            {
              id: 2,
              name: '核销大金柜x1',
              tag: '销售',
              count: '-100.00',
              date: '2025年01月08日 13:32:31',
              order: '33634.00'
            },
            {
              id: 3,
              name: '核销大金柜x1',
              tag: '自己',
              count: '-100.00',
              date: '2025年01月08日 13:32:31',
              order: '33634.00'
            },
            {
              id: 4,
              name: '系统自动备货大金柜',
              tag: '销售',
              count: '-100.00',
              date: '2025年01月08日 13:32:31',
              order: '33634.00'
            }
          ]
        }
      ],
      teamList: [
        {
          title: '2025年1月',
          num: '收入￥23423.00',
          list: [
            {
              id: 1,
              name: '李**',
              tag: '代理商',
              count: '3000.00'
            },
            {
              id: 2,
              name: '李**',
              tag: '代理商',
              count: '3000.00'
            },
            {
              id: 3,
              name: '李**',
              tag: '代理商',
              count: '3000.00'
            }
          ]
        },
        {
          title: '2024年12月',
          num: '收入￥23423.00',
          list: [
            {
              id: 1,
              name: '李**',
              tag: '代理商',
              count: '3000.00'
            },
            {
              id: 2,
              name: '李**',
              tag: '代理商',
              count: '3000.00'
            },
            {
              id: 3,
              name: '李**',
              tag: '代理商',
              count: '3000.00'
            },
            {
              id: 4,
              name: '李**',
              tag: '代理商',
              count: '3000.00'
            }
          ]
        }
      ],
      searchShow: false,
      activeSearch: 1,
      activeType:1
    };
  },
  methods: {
    checkSearch(index) {
      this.activeSearch = index;
    },
    handleSubmit() {
      this.searchShow=false;
      this.activeType = this.activeSearch
    },
    goTeamDetail() {
      uni.navigateTo({
        url: '/pages/income/team/team'
      })
    }
  },
  computed: {

  },
  watch: {

  },
  // 页面周期函数--监听页面加载
  onLoad() {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {},
  // 页面上拉触底事件的处理函数
  onReachBottom() {},
  // 用户点击右上角分享
  onShareAppMessage() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  onPageScroll(e) {}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
